<template>
  <div id="equipment_index">
    <div class="title">
      <span class="left">设备管理</span>
      <div>
        <el-button class="add" type="primary" size="small"  @click="goLink('../page/fullScreen')">
          全屏监控
        </el-button>
        <el-button class="add" type="primary" size="small" icon="el-icon-plus" @click="goLink('/equipment/equipmentadd')">
          添加
        </el-button>
      </div>
     
      
    </div>

    <div class="btnSearch">
       <el-button type="primary" class="searchs" size="small" @click="search">查询</el-button>
        <el-input v-model="keyword" class="canInput" size="small" placeholder="设备名称/窗口名称" clearable></el-input>
       
    </div>
     

    <el-table
      type="index"
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width: 100%;padding: 32px;"
      
    >
    
      <el-table-column
        prop="number"
        label="序号"
        align="center"
        width="100">
        <template slot-scope="scope" >
          <span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span>
        </template>
      </el-table-column>
      
      <el-table-column
        prop="name"
        width=""
        align="center"
        label="设备名称"
      >
      </el-table-column>

       <el-table-column
        prop="windowName"
        width=""
        align="center"
        label="连接窗口"
      >
      </el-table-column>
			<el-table-column
				width=""
				align="center"
				label="地址码"
			>
				<template slot-scope="scope">
					<span style="color: #328EF9;text-decoration:none;cursor: pointer">{{scope.row.uniqueldentifier}}</span>
				</template>
			</el-table-column>
      <el-table-column
        prop="state"
        label="运行状态"
        align="center"
        width="240">
        <template slot-scope="scope">
            <span v-if="scope.row.state === false" ><img src="../assets/img/abnormal.png" alt="" width="12" style="margin-right: 4px;">异常</span>
						<span v-else-if="scope.row.state === true" ><img src="../assets/img/normal.png" alt="" width="12" style="margin-right: 4px;">正常</span>
        </template>
      
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        align="center"
				width="300"
      >
        <template slot-scope="scope">
          <img @click="goLink('/equipment/equipmentsee',scope.row.id,scope.row.windowId)" class="imgGroup" src="../assets/img/yewu_02.png">
          <img @click="goLink('/equipment/equipmentedit',scope.row.id,scope.row.windowId)" class="imgGroup" src="../assets/img/yewu_01.png">
          <img @click="removeData(scope.row.id,scope.row.windowId)" class="imgGroup" src="../assets/img/yewu_03.png">
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
				@current-change="handleCurrentChange" 
        :page-size="pagesize" 
				:page-sizes="[1, 2, 3, 4]" 
				layout="prev, pager, next"
        :total="parseInt(totalCounts)">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {getAllFacility,deleteFacility} from '../api/getData'
export default {
  name: "equipment_index",
  data: function() {
    return {
			keyword:'',
      centerDialogVisible: false,
      dataindex: 0,
			tableData:[],
			currentPage:1,
			pagesize:10,
			totalCounts:0,
    };
  },
  created() {
		// this.getAllList()
	}, // 创建时
  beforeMount: function() {}, // 挂载之前
  mounted: function() {}, // 挂载之后
  beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
  updated: function() {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function() {}, // 实例销毁后调用
	beforeRouteEnter(to, from, next){
			next(vm=>{
					console.log(vm)
					// 每次进入路由执行
					vm.getAllList()
			})
	},
  methods: {
    goLink(url,id,windowid) {
      this.$router.push({
				path:url,
				query:{
					id:id,
					'windowId':windowid
				}
			});
    },
		// 获取所有设备信息
		getAllList(){
			getAllFacility({
				multiQuery:this.keyword
			}).then((res) =>{
				if(res.data.code ==0){
					this.tableData = res.data.data
					this.totalCounts = res.data.data.length
				}else{
					this.tableData = []
					this.totalCounts = 0
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		// 删除设备
		removeData(id,windowid){
			this.$confirm('请再次确认是否删除?','提示',{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(()=>{
				if(windowid == null){
					windowid = 'null'
				}
				console.log(typeof windowid)
				deleteFacility({
					id:id,
					windowId:windowid
				}).then((res) =>{
					if(res.data.code == 0){
						this.$message({
							type: 'success',
							message: res.data.msg
						});
						this.getAllList()
					}else{
						this.$message.error(res.data.msg)
					}
				}).catch((error) =>{
					console.log(error)
				})
			}).catch(()=>{
				this.$message({
					type: 'info',
					message: '已取消删除'
				});  
			})
		},
		// 分页
		handleSizeChange(size) {
			console.log(this.pagesize)
			this.pagesize = size;
		},
		handleCurrentChange(currentPage) {
			this.currentPage = currentPage;
		},
		// 搜索
		search(){
			this.getAllList()
		}
  } // 函数
};
</script>
<style lang='scss'>
#equipment_index {
  .title {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    margin-bottom: 24px;
    padding: 0 20px;
    .left {
      font-size: 16px;
      color: #333437;
      font-weight: bold;
    }
    .add {
      color: #fff;
    }
  }
  .btnSearch{
    background: #fff;
    padding-top: 24px;
    overflow: hidden;
    .canInput{
      width: 400px;
      float: right;
      margin-right: 16px;
    }
    .searchs{
      width: 65px;
      margin-right: 48px;
       float: right;
    }
   
  }
  .el-table thead tr th {
    background-color: #fafafa;
		color: #333;
  }
  .el-table::before {
    height: 0;
  }
  .imgGroup {
    cursor: pointer;
    margin: 0 10px;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    background-color: #fff;
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
      background-color: #fff;
      border: 1px solid #ccc;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #409eff;
    }
  }
}
</style>
